<template>
  <div id="user">
    <Form ref="user_data" :label-width="60" :model="user_data">
      <div>
          <Avatar class="avavtar" icon="ios-person" :src="src"/>
          <row type="flex" justify="center">
            <Button @click="fileClick" icon="ios-search">更换头像</Button>
          </row>
        <input
          accept="image/*"
          type="file"
          value
          id="file"
          multiple="multiple"
          @change="addImage"
        />
      </div>
      <p style="text-align: center">注意：修改后的手机号码，将是您以后的登录号码)</p>
       <FormItem label="昵称:">
        <Input type="text" v-model="user_data.name">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="手机:">
        <Input type="text" v-model="user_data.tel">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="年龄:">
        <Input type="text" v-model="user_data.ago">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem label="性别:">
        {{user_data.gender}}
          <Select v-model="user_data.gender" style="width:100px">
            <Option prefix="ios-person-outline" value="男"></Option>
            <Option prefix="ios-person-outline" value="女"></Option>
          </Select>
      </FormItem>
      <FormItem>
        <Button class="user_btn" icon="md-arrow-round-forward" shape="circle" size="large" v-on:click="userSubmit(user_data)"></Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: 'User',
    data() {
      return {
        src:'',
        gender: '',
        user_data: '',
        file:'',
      }
    },
    components: {
    },
    methods: {
      fileClick(){
        document.getElementById('file').click();
      },
      addImage(files){
        console.log(files);
        let file = files.target.files[0];
        let param = new FormData(); //创建form对象
        param.append('user_avatar',file,file.name);//通过append向form对象添加数据
        param.append('id',this.user_data.user_id);//添加form表单中其他数据
        param.append('avatar',this.user_data.avatar);//添加form表单中其他数据
        //console.log(param.get('tweetPic')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        //添加请求头
        let config = {
        	headers:{'Content-Type':'multipart/form-data'}
        };
        this.$axios.post('/tp5_jzt-blog_server/public/index.php/home/avatar',param,config)
                .then(response=>{
        			// console.log(response.data);
              sessionStorage.setItem("userdata", JSON.stringify(response.data));
              this.$Message.success('头像更换成功!');
              this.$router.go(0)
        		})
        },
      userSubmit(data){
        console.log(data);
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/user',
          data: {
            user_data: this.user_data
          },
        }).then((res) => {
          console.log(res.data);
          sessionStorage.setItem("userdata", JSON.stringify(res.data));
          this.$Message.success('信息修改成功!');
          this.$router.go(0)
        }).catch((error) => {
          console.log(error)
        })
      },
      ifLogin() {
        if (sessionStorage.getItem("userdata")) {
          this.if_login = true;
          this.user_data = JSON.parse(sessionStorage.getItem("userdata"));
          if(this.user_data.avatar==''){
            this.src='';
          }else{
            this.src=this.$src+'tp5_jzt-blog_server/public/uploads/avatar/'+this.user_data.avatar;
          }
        } else {
          this.if_login = false;
        }
      },
    },
    created() {
      this.ifLogin();
    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #file{
    display: none;
  }
  .avavtar{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    font-size: 100px;
    line-height: 100px;
  }
  .user_btn{
    display: block;
    float: right;
  }
</style>
